<template>
  <div>
    <!-- 管理员 -->
    <div>
      <a-spin tip="加载中..." size="large" :spinning="spinning">
        <!-- 数据概况 -->
        <a-card style="height: auto">
          <div style="font-size: 22px; color: #696cff">数据概况</div>
          <div
            style="
              display: flex;
              justify-content: space-around;
              margin-top: 20px;
              margin-bottom: 20px;
            "
          >
            <!-- 注册用户 -->
            <div class="card_box">
              <div class="card_box_every">
                <div>
                  <h3>注册用户</h3>
                  <h2
                    style="font-weight: bold; font-size: 24px"
                    v-text="registerUserNum === null ? 0 : registerUserNum"
                  ></h2>
                </div>
                <div>
                  <span>昨日新增：</span>
                  <span
                    style="color: #529b2e; font-size: 18px; font-weight: bold"
                    v-text="registeYesterday === null ? 0 : registeYesterday"
                  ></span>
                </div>
              </div>
            </div>
            <!-- 商户认证 -->
            <div class="card_box">
              <div class="card_box_every">
                <div>
                  <h3>商户认证</h3>
                  <h2
                    v-text="businessNum === null ? 0 : businessNum"
                    style="font-weight: bold; font-size: 24px"
                  ></h2>
                </div>
                <div>
                  <span>昨日新增：</span>
                  <span
                    v-text="businessYesterday === null ? 0 : businessYesterday"
                    style="color: #529b2e; font-size: 18px; font-weight: bold"
                  ></span>
                </div>
              </div>
            </div>
            <!-- 店铺数量 -->
            <div class="card_box">
              <div class="card_box_every">
                <div>
                  <h3>店铺数量</h3>
                  <h2
                    v-text="storeNum === null ? 0 : storeNum"
                    style="font-weight: bold; font-size: 24px"
                  ></h2>
                </div>
                <div>
                  <span>昨日新增：</span>
                  <span
                    v-text="storeYesterday === null ? 0 : storeYesterday"
                    style="color: #529b2e; font-size: 18px; font-weight: bold"
                  ></span>
                </div>
              </div>
            </div>
            <!-- 商品数量 -->
            <div class="card_box">
              <div class="card_box_every">
                <div>
                  <h3>商品数量</h3>
                  <h2
                    v-text="goodsNum === null ? 0 : goodsNum"
                    style="font-weight: bold; font-size: 24px"
                  ></h2>
                </div>
                <div>
                  <span>昨日新增：</span>
                  <span
                    v-text="goodsYesterday === null ? 0 : goodsYesterday"
                    style="color: #529b2e; font-size: 18px; font-weight: bold"
                  ></span>
                </div>
              </div>
            </div>
          </div>
        </a-card>

        <!-- 数据总结 -->
        <a-card
          style="height: auto; margin-top: 10px; background-color: #f0f2f5"
        >
          <a-row>
            <a-col :span="12">
              <CommonEchart />
            </a-col>
            <a-col :span="12">
              <a-row>
                <a-col :span="13">
                  <!-- 订单统计 -->
                  <div class="card_box_total">
                    <div class="card_box_every_total">
                      <div class="common">
                        <a-button
                          type="primary"
                          size="large"
                          style="background-color: #696cff; letter-spacing: 3px"
                          >订单统计</a-button
                        >
                      </div>

                      <div
                        style="
                          padding: 20px;
                          display: flex;
                          justify-content: space-between;
                        "
                      >
                        <div>
                          <h2
                            v-text="totalOrder === null ? 0 : totalOrder"
                            style="font-weight: bold; margin-left: 10px"
                          ></h2>
                          <span style="color: #566a7f; font-size: 16px"
                            >总订单</span
                          >
                        </div>
                        <div>
                          <h3
                            v-text="aliPay === null ? 0 : aliPay"
                            style="
                              font-size: 500;
                              margin-left: 10px;
                              margin-bottom: 15px;
                            "
                          ></h3>
                          <span style="color: #566a7f; font-size: 14px"
                            >支付宝</span
                          >
                        </div>
                      </div>

                      <div class="common">
                        <div
                          style="
                            margin-bottom: 30px;
                            display: flex;
                            justify-content: space-between;
                          "
                        >
                          <div>
                            <AlipayCircleOutlined :style="AlipayStyle" />
                            <span
                              style="
                                margin-left: 10px;
                                color: #a1acb8;
                                font-size: 12px;
                              "
                              >软件版, 本地版</span
                            >
                          </div>
                          <h3
                            v-text="aliPay === null ? 0 : aliPay"
                            style="color: #566a7f"
                          ></h3>
                        </div>
                        <div
                          style="
                            margin-bottom: 30px;
                            display: flex;
                            justify-content: space-between;
                          "
                        >
                          <div>
                            <WechatOutlined :style="WeiXinStyle" />
                            <span
                              style="
                                margin-left: 10px;
                                color: #a1acb8;
                                font-size: 12px;
                              "
                              >店员版, 云端免输入</span
                            >
                          </div>
                          <h3
                            v-text="wechatPay === null ? 0 : wechatPay"
                            style="color: #566a7f"
                          ></h3>
                        </div>
                      </div>
                    </div>
                  </div>
                </a-col>
                <a-col :span="11">
                  <div style="display: flex; justify-content: center">
                    <!-- 本周流水 -->
                    <div class="card_box_other">
                      <div class="card_box_every_other">
                        <div style="padding: 20px">
                          <a-button
                            type="primary"
                            style="
                              background-color: #696cff;
                              letter-spacing: 3px;
                            "
                            >本周流水</a-button
                          >
                        </div>

                        <div style="padding-left: 20px">
                          <div
                            style="
                              display: flex;
                              justify-content: space-between;
                              margin-top: 10px;
                            "
                          >
                            <div>
                              <PayCircleOutlined :style="payCircleStyle" />
                              <h2
                                style="
                                  font-weight: bold;
                                  margin-left: 5px;
                                  font-size: 20px;
                                  color: #606266;
                                  margin-top: 10px;
                                "
                                v-text="
                                  weekdayTotal === null ? 0 : weekdayTotal
                                "
                              ></h2>
                            </div>
                            <svg
                              t="1710468195925"
                              class="icon"
                              viewBox="0 0 1170 1024"
                              version="1.1"
                              xmlns="http://www.w3.org/2000/svg"
                              p-id="8909"
                              width="100"
                              height="70"
                            >
                              <path
                                d="M159.695238 609.52381c8.533333 0 15.847619-2.438095 23.161905-6.095239l179.2 136.533334h1.219047c1.219048 18.285714 17.066667 31.695238 35.352381 31.695238 19.504762 0 35.352381-15.847619 35.352381-35.352381 0-4.87619-1.219048-8.533333-2.438095-12.190476L694.857143 357.180952H698.514286l141.409524 210.895238c-1.219048 3.657143-2.438095 7.314286-2.438096 12.190477 0 19.504762 15.847619 35.352381 35.352381 35.352381 19.504762 0 35.352381-15.847619 35.352381-35.352381 0-2.438095 0-4.87619-1.219047-6.095238L1072.761905 323.047619c2.438095 0 4.87619 1.219048 7.314285 1.219048 26.819048 0 48.761905-21.942857 48.761905-48.761905s-21.942857-48.761905-48.761905-48.761905-48.761905 21.942857-48.761904 48.761905c0 9.752381 3.657143 19.504762 8.533333 26.819048L878.933333 547.352381c-2.438095 0-4.87619-1.219048-7.314285-1.219048h-2.438096L727.771429 335.238095c1.219048-3.657143 2.438095-7.314286 2.438095-12.190476 0-19.504762-15.847619-35.352381-35.352381-35.352381-19.504762 0-35.352381 15.847619-35.352381 35.352381 0 4.87619 1.219048 8.533333 2.438095 12.190476L398.628571 703.390476h-1.219047c-6.095238 0-12.190476 1.219048-17.066667 4.876191l-174.323809-134.095238c1.219048-3.657143 1.219048-7.314286 1.219047-12.190477 0-26.819048-21.942857-48.761905-48.761905-48.761904s-48.761905 21.942857-48.761904 48.761904c1.219048 26.819048 23.161905 47.542857 49.980952 47.542858z m919.161905-362.057143c15.847619 0 29.257143 13.409524 29.257143 29.257143 0 15.847619-13.409524 29.257143-29.257143 29.257142-15.847619 0-29.257143-13.409524-29.257143-29.257142 0-15.847619 13.409524-29.257143 29.257143-29.257143z m-207.238095 318.171428c8.533333 0 15.847619 7.314286 15.847619 15.847619 0 8.533333-7.314286 15.847619-15.847619 15.847619-8.533333 0-15.847619-7.314286-15.847619-15.847619 0-8.533333 7.314286-15.847619 15.847619-15.847619zM694.857143 307.2c8.533333 0 15.847619 7.314286 15.847619 15.847619 0 8.533333-7.314286 15.847619-15.847619 15.847619-8.533333 0-15.847619-7.314286-15.847619-15.847619 0-8.533333 6.095238-15.847619 15.847619-15.847619z m-298.666667 414.47619c8.533333 0 15.847619 7.314286 15.847619 15.84762 0 8.533333-7.314286 15.847619-15.847619 15.847619-8.533333 0-15.847619-7.314286-15.847619-15.847619 0-8.533333 7.314286-15.847619 15.847619-15.84762zM159.695238 532.72381c15.847619 0 29.257143 13.409524 29.257143 29.257142s-13.409524 29.257143-29.257143 29.257143c-15.847619 0-29.257143-13.409524-29.257143-29.257143s12.190476-29.257143 29.257143-29.257142z"
                                fill="#1296db"
                                p-id="8910"
                              ></path>
                              <path
                                d="M71.92381 909.409524V73.142857H30.47619v877.714286h1109.333334v-41.447619z"
                                fill="#1296db"
                                p-id="8911"
                              ></path>
                            </svg>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div style="display: flex; justify-content: center">
                    <!-- 今年总流水 -->
                    <div class="card_box_other">
                      <div class="card_box_every_other">
                        <div style="padding: 20px">
                          <a-button
                            type="primary"
                            style="
                              background-color: #696cff;
                              letter-spacing: 3px;
                            "
                            >今年总流水</a-button
                          >
                        </div>

                        <div style="padding-left: 20px">
                          <div
                            style="
                              display: flex;
                              justify-content: space-between;
                              margin-top: 10px;
                            "
                          >
                            <div>
                              <PayCircleOutlined :style="payCircleStyle" />
                              <h2
                                v-text="
                                  thisYearTotal === null ? 0 : thisYearTotal
                                "
                                style="
                                  font-weight: bold;
                                  margin-left: 5px;
                                  font-size: 20px;
                                  color: #606266;
                                  margin-top: 10px;
                                "
                              ></h2>
                            </div>
                            <svg
                              t="1710467403275"
                              class="icon"
                              viewBox="0 0 1120 1024"
                              version="1.1"
                              xmlns="http://www.w3.org/2000/svg"
                              p-id="8265"
                              width="100"
                              height="70"
                            >
                              <path
                                d="M1095.949986 1024L0 1022.886654V24.354444a24.354444 24.354444 0 0 1 48.708888 0V974.177766l1047.241098 1.113346a24.354444 24.354444 0 1 1 0 48.708888z"
                                p-id="8266"
                                fill="#1296db"
                              ></path>
                              <path
                                d="M124.486002 927.347649a24.28486 24.28486 0 0 1-20.875238-37.227508L357.662408 483.609677l119.754281 169.019842L714.698559 292.25333l130.887742 155.033433 172.151128-260.105464a24.354444 24.354444 0 0 1 40.637129 26.929057l-207.986953 314.17233-130.887741-154.824681-240.621908 365.525414-118.293014-167.488991-215.084534 344.441424a24.28486 24.28486 0 0 1-21.014406 11.411797z"
                                p-id="8267"
                                fill="#1296db"
                              ></path>
                              <path
                                d="M1087.043218 258.644197l8.906768-145.430824-130.400652 64.991574 121.493884 80.43925z"
                                p-id="8268"
                                fill="#1296db"
                              ></path>
                            </svg>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-card>
      </a-spin>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import {
  AlipayCircleOutlined,
  WechatOutlined,
  PayCircleOutlined,
} from "@ant-design/icons-vue";
import CommonEchart from "@/views/echarts/CommonEchart";
import {
  findRegisterUserNum,
  findBusinessNum,
  findGoodsNum,
  findStoreNum,
  findTotalOrderData,
  findWeekTotalOrderData,
  findThisYearData,
} from "@/api/index";

const spinning = ref(true);
const registerUserNum = ref(0);
const registeYesterday = ref(0);
const businessNum = ref(0);
const businessYesterday = ref(0);
const storeNum = ref(0);
const storeYesterday = ref(0);
const goodsNum = ref(0);
const goodsYesterday = ref(0);
const totalOrder = ref(0);
const aliPay = ref(0);
const wechatPay = ref(0);
const weekdayTotal = ref(0);
const thisYearTotal = ref(0);

onMounted(() => {
  getRegisterUserNum();
  getBusinessNum();
  getStoreNum();
  getGoodsNum();
  getTotalOrderData();
  getWeekTotalOrderData();
  getThisYearData();
  setInterval(() => {
    spinning.value = false;
  }, 2000);
});

//获取注册用户数量接口
function getRegisterUserNum() {
  findRegisterUserNum().then((res) => {
    if (res.code === 200 && res.data !== null) {
      registerUserNum.value = res.data.count;
      registeYesterday.value = res.data.yesterday;
    }
  });
}

//获取商户认证数量接口
function getBusinessNum() {
  findBusinessNum().then((res) => {
    if (res.code === 200 && res.data !== null) {
      businessNum.value = res.data.count;
      businessYesterday.value = res.data.yesterday;
    }
  });
}

//获取店铺数量接口
function getStoreNum() {
  findStoreNum().then((res) => {
    if (res.code === 200 && res.data !== null) {
      storeNum.value = res.data.count;
      storeYesterday.value = res.data.yesterday;
    }
  });
}

//获取商品数量接口
function getGoodsNum() {
  findGoodsNum().then((res) => {
    if (res.code === 200 && res.data !== null) {
      goodsNum.value = res.data.count;
      goodsYesterday.value = res.data.yesterday;
    }
  });
}

//获取订单统计接口
function getTotalOrderData() {
  findTotalOrderData().then((res) => {
    if (res.code === 200 && res.data !== null) {
      totalOrder.value = res.data.total;
      aliPay.value = res.data.alipay;
      wechatPay.value = res.data.wechat;
    }
  });
}

//获取本周总流水接口
function getWeekTotalOrderData() {
  findWeekTotalOrderData().then((res) => {
    if (res.code === 200) {
      weekdayTotal.value = res.data;
    }
  });
}

//获取今年总流水接口
function getThisYearData() {
  findThisYearData().then((res) => {
    if (res.code === 200) {
      thisYearTotal.value = res.data;
    }
  });
}

const AlipayStyle = {
  color: "#409EFF",
  fontSize: "25px",
};
const WeiXinStyle = {
  color: "#67C23A",
  fontSize: "25px",
};

const payCircleStyle = {
  color: "#F56C6C",
  fontSize: "24px",
  paddingLeft: "5px",
};
</script>

<style scoped>
.custom-class {
  /* color: #E6A23C; */
  color: red;
}

:deep(.ant-card-body) {
  padding: 10px;
}

.card_box {
  border-radius: 8px;
  width: 250px;
  height: 100px;
  transition: all 0.3s;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background: linear-gradient(to bottom right, #ffffff, #f0f0f0);
}

.card_box_every {
  height: 100px;
  background-color: #c6e2ff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 8px;
}

/* 订单统计 */
.card_box_total {
  border-radius: 10px;
  width: 320px;
  height: 370px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background: linear-gradient(to bottom right, #ffffff, #f0f0f0);
}

.card_box_every_total {
  margin-top: 10px;
  height: 370px;
  background-color: #fff;
  border-radius: 10px;
}

.common {
  padding: 20px;
  margin-bottom: 10px;
}

/* 订单统计 */
.card_box_other {
  margin-top: 10px;
  border-radius: 10px;
  width: 200px;
  height: 180px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background: linear-gradient(to bottom right, #ffffff, #f0f0f0);
}

.card_box_every_other {
  height: 180px;
  background-color: #fff;
  border-radius: 10px;
}
</style>